<template>
  <el-main>
                <div>
                  <el-form ref="form" :model="form" label-width="100px">
                    <el-form-item label="请输入航班号">
                      <el-row>
                        <el-col :span="40">
                          <el-input
                            style="width: 200%"
                            v-model="form.dfltFlno"
                          ></el-input>
                        </el-col>
                      </el-row>
                      <el-col :span="20">
                        <el-button
                          class="btn1"
                          type="primary"
                          @click="onSubmit"
                          >查询</el-button
                        >
                      </el-col>
                    </el-form-item>
                    <div class="link-top"></div>
                    <el-form-item label="目的地">
                      <el-input
                        style="width: 400px"
                        v-model="form.apcd"
                      ></el-input>
                    </el-form-item>
                    <el-form-item label="航空公司">
                      <el-input
                        style="width: 400px"
                        v-model="form.dfltAwcd"
                      ></el-input>
                    </el-form-item>
                    <el-form-item label="日期">
                      <el-col :span="13">
                        <el-date-picker
                          type="date"
                          placeholder="选择日期"
                          v-model="form.startDate"
                          style="width: 200px"
                        ></el-date-picker>
                         <el-col :span="1" class="btn2">到</el-col>
                        <el-date-picker
                          type="date"
                          placeholder="选择日期"
                          v-model="form.endDate"
                          style="width: 200px"
                          class="btn3"
                        ></el-date-picker>
                      </el-col>
                    </el-form-item>
                    <el-form-item>
                      <el-button type="primary" @click="onSubmit"
                        >搜索</el-button
                      >
                    </el-form-item>
                  </el-form>
                </div>
                <!-- 数据表 -->
                <el-table
                  ref="singleTable"
                  :data="tableData"
                  highlight-current-row
                  style="width: 100%"
                >
                  <el-table-column
                    property="dfltFlno"
                    label="航班号"
                    width="100"
                  >
                  </el-table-column>
                  <el-table-column
                    property="dfltAwcd"
                    label="航空公司"
                    width="200"
                  >
                  </el-table-column>
                  <el-table-column property="apcd" label="第一站" width="120">
                  </el-table-column>
                  <el-table-column property="transitApcd" label="第二站" width="120">
                  </el-table-column>
                  <el-table-column property="dtime" label="日期" width="200">
                  </el-table-column>
                  <el-table-column
                    property="fptt"
                    label="第一站时间"
                    width="215"
                  >
                  </el-table-column>
                  <el-table-column
                    property="fplt"
                    label="第二站时间"
                    width="215"
                  >
                  </el-table-column>
                  <el-table-column
              label="操作"
              width="150">
          <template #default="scope">
              <el-button type="success" size="small" @click="onEdit(scope.row)">修改</el-button>
              <el-button type="danger" size="small" @click="onDelete(scope.row)">删除</el-button>
          </template>
      </el-table-column>
                </el-table>
                <!-- 分页组件 -->
                <el-pagination
                  background
                  layout="prev, pager, next"
                  :total="count"
                  :current-page="page"
                  :pageCount="pageCount"
                  @current-change="changePage"
                >
                </el-pagination>
              </el-main>

</template>
  
  <script>
  export default {
    name: "Dairtransit",
    data() {
  return {
    selectLabel:0,
    tableDataType:1,
    formLabelWidth: "120px", //表单文本宽度
    tableData: [{}], //图书分页数据
    count: 0, //记录总数
    page: 1, //当前页码
    pageCount: "", //总页数
    form: {
      dfltAwcd:"",
      dfltFlno:"",
      apcd: "",
      region: "",
      startDate: "",
      endDate: "",
      delivery: false,
      type: [],
      resource: "",
      desc: "",
    },
  }
  },
  methods: {
      changePage(currentPage) {
          this.page = currentPage;
        this.fetchData();
    },
    fetchData() {
    const pageNum = this.page;
    const pageSize = 10; // 设置每页显示的数据条数
    this.$axios
      .get("http://localhost:8888/dfdl/getAApno3", { params: { pageNum, pageSize } })
      .then((response) => {
        const result = response.data.data;
        this.count = result.size;
        this.pageCount = Math.ceil(result.total / pageSize);
        this.tableData = result.list;
        this.tableDataType=1;
        console.info(this.tableData);
      })
      .catch((error) => {
        console.error(error);
      });
  },
  },
     
  mounted() {

  this.fetchData();

}
  }

</script>
